import React from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import { UnorderedListOutline, EnvironmentOutline,FaceRecognitionOutline,TeamOutline } from 'antd-mobile-icons'

function Tabbar() {
  const navigate=useNavigate();
  const pathname=useLocation();
  return (
    <div>
      <Outlet></Outlet>
      <div activekey={pathname}>
        <TabBar style={{position:"fixed", bottom:0 ,background:"#ccc", width:"100%"}} onChange={(key)=>navigate(key)}>
          <TabBar.Item key={'/'} title={"首页"} icon={<UnorderedListOutline />}></TabBar.Item>
          <TabBar.Item key={'/xc'} title={"行程"} icon={<EnvironmentOutline />}></TabBar.Item>
          <TabBar.Item key={'/kh'} title={"客户"} icon={<FaceRecognitionOutline />}></TabBar.Item>
          <TabBar.Item key={'/my'} title={"我的"} icon={<TeamOutline />}></TabBar.Item>
        </TabBar>
      </div>
    </div>
  )
}

export default Tabbar
